<template>
  <div>
    <el-card :body-style="{ margin: '40px 200px' }">
      <div style="float:left;" >
        <img style="max-width: 400px;max-height:600px; margin: 20px" :src="items.cover"/>
      </div>

      <div style="padding: 14px;">
        <b style="font-size: 50px;">{{ items.name }}</b><br>
        <b style="font-size: 30px;">作者:{{ items.author }}</b><br>
        <b style="font-size: 15px;">出版时间:{{ items.createtime }}</b><br>
        <b style="font-size: 15px;">出版社:{{ items.publish }}</b><br>
        <b style="font-size: 30px;">价格:</b><b style="font-size: 40px;color: #c04851">{{ items.price }}</b><br>
        <b style="font-size: 30px;">类型:{{ items.type }}</b><br>
        <b style="font-size: 30px;">简介:</b><br>
        <b style="margin-left: 20px" v-html="items.synopsis" ></b>
      </div>
      <button style="margin: 14px 0" text class="button" @click="delrec()" v-if="recommendState === true">取消收藏</button>
      <button style="margin: 14px 0" text class="button" @click="add()" v-if="recommendState === false">加入收藏</button>
    </el-card>

    <div style="margin: 30px 0">
      <div style="margin: 10px 250px">
        <div style="border-bottom: 1px solid orangered; padding: 10px 0; font-size: 20px;">评论</div>
        <el-form :model="form" label-width="120px" style="padding: 10px 0;">
          <el-row :gutter="20">
            <el-col :span="2" style="text-align: center;padding: 15px 9px;">
              <span style="font-size: 20px;width: auto;height: auto;">{{ user.nickname }}:</span>
            </el-col>
            <el-col :span="20">
                <el-input v-model="form.content" type="textarea" />
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="save" :span="4" size="large" style="width: 100px;height: 50px; font-size: 20px">
                发布
              </el-button>
            </el-col>

          </el-row>

        </el-form>
      </div>
    </div>

    <div style="margin: 10px 250px">
      <div v-for="item in news" :key="item.id" style="border-bottom: 1px solid #CCC; padding: 10px 0; display: flex">
          <div style="flex: 1; font-size: 14px; padding: 5px 0; line-height: 25px;" >
            <b style="font-size: large">{{item.author}}:</b>&nbsp;
            <span>{{item.content}}</span><br>
            <span>{{item.time}}</span>
          </div>
          <div style="text-align: right; flex: 1">
            <el-button class="button" type="text" @click="del(item.id)" v-if="user.nickname === item.author"><span class="button_lg">
              <span class="button_sl"></span>
                <span class="button_text">删除</span>
                </span>
            </el-button>
          </div>
      </div>
    </div>

  </div>
</template>

<script>
import request from "../../utils/request";

export default {
  name: "MediaContent",
  data() {
    return {
      items: [],
      form: {},
      news: [],
      recommends:{},
      recommendState:false,//默认false是可收藏，true是已收藏
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    }
  },
 created() {
   this.load()
 },
  methods: {
    add(){
      this.recommends.user_id = this.user.id
      this.recommends.book_id = this.$route.params.id
      request.post ("/api/recommend/addRecommend",this.recommends).then(res => {
        console.log(res)
        if(res.code === '0'){
          this.$message({
            type:"success",
            message: "收藏成功"
          });
          this.recommendState = true
          console.log(this.recommendState)
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()   //刷新表格数据
      })
    },
    delrec(){
      request.delete("/api/recommend/del/" + this.user.id + "/" + this.$route.params.id).then(res => {
        if(res.code === '0'){
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()   //删除之后重新加载表格
      })
    },
    load(){
     request.get("/api/book/" + this.$route.params.id).then(res => {
       console.log(res)
       this.items = res.data
      })
      request.get("/api/news/comments/" + this.$route.params.id).then(res => {
        console.log(res)
        this.news = res.data
      })
      request.get("/api/recommend/exitsRecommend/" + this.user.id + "/" + this.$route.params.id).then(res=>{
        console.log(res)
        if(res.data!=null){        //从表中查询是否有记录，不为空把recommendState设置true
          this.recommendState=true
        }
        if(res.data.length == 0){  //获取结果集如果存在则把recommendState设置true,防止重复收藏
          this.recommendState=false
        }
      })
    },

    save(){
      let userStr = sessionStorage.getItem("user") || "{}"
      let user = JSON.parse(userStr)
      this.form.author = user.nickname
      this.form.bookname = this.items.name
      this.form.book_id = this.items.id
      request.post("/api/news",this.form).then(res => {
        console.log(res)
        if(res.code === '0'){
          this.$message({
            type: "success",
            message: "发布成功"
          })
          this.form = {} //初始化评论内容
          this.load()
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    },
    del(id){   //删除
      request.delete("/api/news/" + id).then(res => {
        if(res.code === '0'){
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()   //删除之后重新加载表格
      })
    },
  }
}
</script>

<style scoped>
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  color: #0f1923;
  cursor: pointer;
  position: relative;
  padding: 8px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  transition: all .15s ease;
}

.button::before,
.button::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  height: calc(50% - 5px);
  border: 1px solid #7D8082;
  transition: all .15s ease;
}

.button::before {
  top: 0;
  border-bottom-width: 0;
}

.button::after {
  bottom: 0;
  border-top-width: 0;
}

.button:active,
.button:focus {
  outline: none;
}

.button:active::before,
.button:active::after {
  right: 3px;
  left: 3px;
}

.button:active::before {
  top: 3px;
}

.button:active::after {
  bottom: 3px;
}

.button_lg {
  position: relative;
  display: block;
  padding: 10px 20px;
  color: #fff;
  background-color: #0f1923;
  overflow: hidden;
  box-shadow: inset 0px 0px 0px 1px transparent;
}

.button_lg::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background-color: #0f1923;
}

.button_lg::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4px;
  height: 4px;
  background-color: #0f1923;
  transition: all .2s ease;
}

.button_sl {
  display: block;
  position: absolute;
  top: 0;
  bottom: -1px;
  left: -8px;
  width: 0;
  background-color: #ff4655;
  transform: skew(-15deg);
  transition: all .2s ease;
}

.button_text {
  position: relative;
}

.button:hover {
  color: #0f1923;
}

.button:hover .button_sl {
  width: calc(100% + 15px);
}

.button:hover .button_lg::after {
  background-color: #fff;
}

</style>